<!DOCTYPE html>
<html>
	<head>
		<title>2.1.5-div的flex模型动态演示</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				height: 100%;
				width: 100%;
			}

			body {
                margin: 0;
				--overflow: auto;
				background-color: white;
			}
            
			.div_row1{
				border: solid 3px red;
				height:200px;
				width:100%;
				position: static;
			}
			.div_row1_p1{
				border: solid 2px green;
				height:160px;
				width:99%;
                --float:left;
				--position: static;
                display: flex;
                /*flex-direction: row; 子元素高度等于父的高度，默认就是行 */
                justify-content: flex-start; /*子元素靠始端排列*/
			}
			.div_row1_p1_i1{
				width:18%;
			}
			.div_row1_p1_i2{
				width:24%;
			}
			.div_row1_p1_i3{
				width:24%;
			}
            .div_row1_p1_i4{
            	width:22%;    
            }
            .div_row1_p1_i5{
            	width:30%;    
            }
			.div_row1_p1_itm{
				border: solid thin blue;
				height:100%;
				--width:30%;
                --float:left;
				--position: static;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
            
			.div_row2{
                background-color: #00FFFF;
				border: solid 3px red;
				height:200px;
				width:100%;
				position: static;
                --display: inline-block;
			}
			.div_row2_p1{
                background-color: #A0A0FF;
				border: solid 2px blue;
				height:150px;
				width:60%;
				position: relative;
                left: 1%;
                --float:left;
                display: flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				--flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
				/*justify-content: space-around; 子元素间隔均等*/
                justify-content: center; /*子元素靠始端排列*/
				/*align-items: center; 垂直置中排列*/
                
			}
			.div_row2_p1_itm{
                background-color: #F0F0A0;
				border: solid thin green;
				height:30%;
				width:25%;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
			.div_row2_p1_itmx{
                background-color: #F0E0A0;
				border: solid thin blue;
				/* height:30%; 不设高度，看（align-content）的影响 */
				width:25%;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
            .paritm_add_off{
                display: none; /* 暂时不显示 */
            }
            .paritm_add_on{
                display: initial; /* 恢复显示 */
            }
            
            .div_row2_p2{
                background-color: #F0F0FF;
				border: solid 2px green;
				height:150px;
				width:30%;
                position: relative;
                top: -153px;
                left: 830px;
                --display: inline;
                --float:left;
            }
            .div_row2_p2_s2{
                background-color: white;
				border: solid 1px green;
                height:calc(100% - 28px);
            }
            .div_row2_p2_tit{
                display: inline-block; 
                --width: 180px;
            }
			
			.div_row3{
				border: solid 3px red;
				height:200px;
				width:100%;
				position: static;
			}
			.div_row3_p1{
				border: solid 2px green;
				height:160px;
				width:99%;
                --float:left;
				--position: relative;
                /* text-align: right; 作用被屏蔽 */
                display: flex;
                /*flex-direction: row; 子元素高度等于父的高度，默认就是行 */
                justify-content: flex-start; /*子元素靠始端排列*/
 			}
			.div_row3_p1_i1{
				width:22%;
			}
			.div_row3_p1_i2{
				width:22%;
			}
			.div_row3_p1_i3{
				width:22%;
			}
            .div_row3_p1_i4{
				width:32%;
            }
			.div_row3_p1_itm{
				border: solid thin blue;
				height:100%;
				--width:30%;
                --float:right;
				--position: relative;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
            .div_row3_p1_s4s{
                background-color: white;
				border: solid 1px green;
                height:calc(100% - 28px);
            }
            
            .text_left{
                text-align: left;
            }
            .text_center{
                text-align: center;                
            }
            .text_right{
                text-align: right;
            }

            .flex-direction-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 150px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            
            .justify-content-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 150px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            
            .align-items-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 120px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            
            .flex-wrap-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 150px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            
            .align-content-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 150px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }

            .align-self-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 120px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            
            .flex-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 120px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            .flex-label2{
                background-color: #E0F0F0;
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 240px; /* 扩宽后，点击label空白区也能触发radio选择*/
            }
            .flex-div2{
                background-color: #E0F0F0;
                border: solid thin green;
                width: 240px; /* 扩宽后，点击label空白区也能触发radio选择*/
                display: flex;
				justify-content: space-around; /*子元素间隔均等*/
             }
            .flex-divl1{
                --border: solid thin green;
                width: 110px; /* 扩宽后，点击label空白区也能触发radio选择*/
                flex: initial;
            }
            .flex-inp1{
                width: 50px; /* 扩宽后，点击label空白区也能触发radio选择*/
                flex: initial;
            }
            
            .margin-divl1{
                --border: solid thin green;
                width: 130px; /* 扩宽后，点击label空白区也能触发radio选择*/
                flex: initial;
            }
            .margin-inp1{
                width: 50px; /* 扩宽后，点击label空白区也能触发radio选择*/
                flex: initial;
                margin: unset;
            }
            
            .text_overflow_auto{
                overflow: auto;
            }
            
            .btn_round{
                background-color: #d7def0;
                border-style: solid;
                border-width: 1px;
                border-color: green;
                border-radius:6px;
                cursor:pointer;
            }
            
            .paritm_beg-label{
                
            }
            .paritm_chk-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 100px;
            }
            
            .subitm_beg-label{
                
            }
            .subitm_chk-label{
                border: solid thin green;
                /* label是内联元素(inline)，是不占行的，要控制宽度，需先设成 inline-block */
                display: inline-block;
                width: 100px;
            }

		</style>
        
        <script>
            
            function p_dir_change(){
                //alert("p_dir_change")
                let p_div = document.getElementById("div_row2_p1");
                let p_itm;
                p_itm = document.getElementById("p_dir_i1");
                if (p_itm.checked){
                    p_div.style.flexDirection = "row"; //CSS属性名 part1-part2 在 JS中要写成驼峰形式：part1Part2
                };
                p_itm = document.getElementById("p_dir_i2");
                if (p_itm.checked){
                    p_div.style.flexDirection = "row-reverse";
                };
                p_itm = document.getElementById("p_dir_i3");
                if (p_itm.checked){
                    p_div.style.flexDirection = "column";
                };
                p_itm = document.getElementById("p_dir_i4");
                if (p_itm.checked){
                    p_div.style.flexDirection = "column-reverse";
                };
                
            }
            function p_justify_change(){
                let p_div = document.getElementById("div_row2_p1");
                let p_itm;
                p_itm = document.getElementById("p_justify_i1");
                if (p_itm.checked){
                    p_div.style.justifyContent = "flex-start";
                };
                p_itm = document.getElementById("p_justify_i2");
                if (p_itm.checked){
                    p_div.style.justifyContent = "flex-end";
                };
                p_itm = document.getElementById("p_justify_i3");
                if (p_itm.checked){
                    p_div.style.justifyContent = "center";
                };
                p_itm = document.getElementById("p_justify_i4");
                if (p_itm.checked){
                    p_div.style.justifyContent = "space-between";
                };
                p_itm = document.getElementById("p_justify_i5");
                if (p_itm.checked){
                    p_div.style.justifyContent = "space-around";
                };
            }
            function p_align_items_change(){
                let p_div = document.getElementById("div_row2_p1");
                let p_itm;
                p_itm = document.getElementById("p_align_items_i1");
                if (p_itm.checked){
                    p_div.style.alignItems = "flex-start";
                };
                p_itm = document.getElementById("p_align_items_i2");
                if (p_itm.checked){
                    p_div.style.alignItems = "flex-end";
                };
                p_itm = document.getElementById("p_align_items_i3");
                if (p_itm.checked){
                    p_div.style.alignItems = "center";
                };
                p_itm = document.getElementById("p_align_items_i4");
                if (p_itm.checked){
                    p_div.style.alignItems = "baseline";
                };
                p_itm = document.getElementById("p_align_items_i5");
                if (p_itm.checked){
                    p_div.style.alignItems = "stretch";
                };
                p_itm = document.getElementById("p_align_items_i6");
                if (p_itm.checked){
                    p_div.style.alignItems = "normal";
                };
            }
            
            function p_wrap_change(){
                let p_div = document.getElementById("div_row2_p1");
                let p_itm;
                debugger
                p_itm = document.getElementById("p_flex_wrap_i1");
                if (p_itm.checked){
                    p_div.style.flexWrap = "nowrap";
                };
                p_itm = document.getElementById("p_flex_wrap_i2");
                if (p_itm.checked){
                    p_div.style.flexWrap = "wrap";
                };
                p_itm = document.getElementById("p_flex_wrap_i3");
                if (p_itm.checked){
                    p_div.style.flexWrap = "wrap-reverse";
                };
                p_itm = document.getElementById("p_flex_wrap_i4");
                if (p_itm.checked){
                    p_div.style.flexWrap = "initial";
                };
                p_itm = document.getElementById("p_flex_wrap_i5");
                if (p_itm.checked){
                    p_div.style.flexWrap = "inherit";
                };
            }
            
            function p_align_content_change(){
                let p_div = document.getElementById("div_row2_p1");
                let p_itm;
                p_itm = document.getElementById("p_align_content_i1");
                if (p_itm.checked){
                    p_div.style.alignContent = "flex-start";
                };
                p_itm = document.getElementById("p_align_content_i2");
                if (p_itm.checked){
                    p_div.style.alignContent = "flex-end";
                };
                p_itm = document.getElementById("p_align_content_i3");
                if (p_itm.checked){
                    p_div.style.alignContent = "center";
                };
                p_itm = document.getElementById("p_align_content_i4");
                if (p_itm.checked){
                    p_div.style.alignContent = "space-between";
                };
                p_itm = document.getElementById("p_align_content_i5");
                if (p_itm.checked){
                    p_div.style.alignContent = "space-around";
                };
                p_itm = document.getElementById("p_align_content_i6");
                if (p_itm.checked){
                    p_div.style.alignContent = "stretch";
                };
                p_itm = document.getElementById("p_align_content_i7");
                if (p_itm.checked){
                    p_div.style.alignContent = "normal";
                };
            }
            
            //选择3个或5个:
            function sele_itm_change(){
                var paritm_chk2 = document.getElementById("paritm_chk2");
                var div_row2_p1_s4 = document.getElementById("div_row2_p1_s4");
                var div_row2_p1_s5 = document.getElementById("div_row2_p1_s5");
                if (paritm_chk2.checked){
                    console.log('s4.className',div_row2_p1_s4.className)
                    div_row2_p1_s4.className = "div_row2_p1_itmx paritm_add_on";
                    div_row2_p1_s5.className = "div_row2_p1_itmx paritm_add_on";
                }else{
                    div_row2_p1_s4.className = "div_row2_p1_itmx paritm_add_off";
                    div_row2_p1_s5.className = "div_row2_p1_itmx paritm_add_off";
                };
            }
            
            function show_par_properties(){
                
                var div_row2_p1 = document.getElementById("div_row2_p1");
                debugger;
                //console.log(div_row2_p1);
                console.log('className of P-DIV:',div_row2_p1.className);
                var real_style = window.getComputedStyle(div_row2_p1, null);
                //console.log('real_style of P-DIV:',real_style);
                let stylestr = "";
                let display = real_style.getPropertyValue('display');
                let flex_direction = real_style.getPropertyValue('flex-direction');
                let justify_content = real_style.getPropertyValue('justify-content');
                let align_items = real_style.getPropertyValue('align-items');
                let flex_wrap = real_style.getPropertyValue('flex-wrap');
                let align_content = real_style.getPropertyValue('align-content');
                
                stylestr = 'display: '+display+';\n';
                stylestr += ' flex-direction: '+flex_direction+';\n';
                stylestr += ' justify-content: '+justify_content+';\n';
                stylestr += ' align-items: '+align_items+';\n';
                stylestr += ' flex-wrap: '+flex_wrap+';\n';
                stylestr += ' align-content: '+align_content+';\n';
                
                var div_row2_p2_s2 = document.getElementById("div_row2_p2_s2");
                div_row2_p2_s2.innerText = stylestr;
            }
            
            function show_son_properties(){
                
                var div_row2_p1_s1 = document.getElementById("div_row2_p1_s1");
                debugger;
                //console.log(div_row2_p1_s1);
                console.log('className of S-DIV:',div_row2_p1_s1.className);
                var real_style_s1 = window.getComputedStyle(div_row2_p1_s1, null);
                //console.log('real_style of P-DIV:',real_style_s1);
                let stylestr = "";
                let align_self = real_style_s1.getPropertyValue('align-self');
                let flex = real_style_s1.getPropertyValue('flex');
                let margin = real_style_s1.getPropertyValue('margin');
                let order = real_style_s1.getPropertyValue('order');
                
                stylestr  = 's1: align-self: '+align_self+';\n';
                stylestr += 's1: flex: '+flex+';\n';
                stylestr += 's1: margin: '+margin+';\n';
                stylestr += 's1: order: '+order+';\n';
                
                let div_row2_p1_s2 = document.getElementById("div_row2_p1_s2");
                let real_style_s2 = window.getComputedStyle(div_row2_p1_s2, null);
                    align_self = real_style_s2.getPropertyValue('align-self');
                    flex = real_style_s2.getPropertyValue('flex');
                    margin = real_style_s2.getPropertyValue('margin');
                    order = real_style_s2.getPropertyValue('order');
                    
                stylestr += 's2: align-self: '+align_self+';\n';
                stylestr += 's2: flex: '+flex+';\n';
                stylestr += 's2: margin: '+margin+';\n';
                stylestr += 's2: order: '+order+';\n';
                
                let div_row2_p1_s3 = document.getElementById("div_row2_p1_s3");
                let real_style_s3 = window.getComputedStyle(div_row2_p1_s3, null);
                    align_self = real_style_s3.getPropertyValue('align-self');
                    flex = real_style_s3.getPropertyValue('flex');
                    margin = real_style_s3.getPropertyValue('margin');
                    order = real_style_s3.getPropertyValue('order');
                    
                stylestr += 's3: align-self: '+align_self+';\n';
                stylestr += 's3: flex: '+flex+';\n';
                stylestr += 's3: margin: '+margin+';\n';
                stylestr += 's3: order: '+order+';\n';
                
                let div_row2_p1_s4 = document.getElementById("div_row2_p1_s4");
                let real_style_s4 = window.getComputedStyle(div_row2_p1_s4, null);
                    align_self = real_style_s4.getPropertyValue('align-self');
                    flex = real_style_s4.getPropertyValue('flex');
                    margin = real_style_s4.getPropertyValue('margin');
                    order = real_style_s4.getPropertyValue('order');
                    
                stylestr += 's4: align-self: '+align_self+';\n';
                stylestr += 's4: flex: '+flex+';\n';
                stylestr += 's4: margin: '+margin+';\n';
                stylestr += 's4: order: '+order+';\n';
                
                var div_row3_p1_s4s = document.getElementById("div_row3_p1_s4s");
                div_row3_p1_s4s.innerText = stylestr;
            }
            
            function s_align_self_change(){
                let div_s1 = document.getElementById("div_row2_p1_s1");
                let div_s2 = document.getElementById("div_row2_p1_s2");
                let div_s3 = document.getElementById("div_row2_p1_s3");
                let div_s4 = document.getElementById("div_row2_p1_s4");
                
                let sele_s1 = document.getElementById("subitm_chk1");
                let sele_s2 = document.getElementById("subitm_chk2");
                let sele_s3 = document.getElementById("subitm_chk3");
                let sele_s4 = document.getElementById("subitm_chk4");
                let s_itm;
                s_itm = document.getElementById("s_align_self_i1");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "auto";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "auto";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "auto";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "auto";
                };
                s_itm = document.getElementById("s_align_self_i2");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "flex-start";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "flex-start";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "flex-start";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "flex-start";
                };
                s_itm = document.getElementById("s_align_self_i3");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "flex-end";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "flex-end";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "flex-end";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "flex-end";
                };
                s_itm = document.getElementById("s_align_self_i4");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "center";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "center";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "center";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "center";
                };
                s_itm = document.getElementById("s_align_self_i5");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "baseline";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "baseline";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "baseline";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "baseline";
                };
                s_itm = document.getElementById("s_align_self_i6");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.alignSelf = "stretch";
                    if (sele_s2.checked)
                    div_s2.style.alignSelf = "stretch";
                    if (sele_s3.checked)
                    div_s3.style.alignSelf = "stretch";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.alignSelf = "stretch";
                };
            }
            
            function s_flex_change(){
                let div_s1 = document.getElementById("div_row2_p1_s1");
                let div_s2 = document.getElementById("div_row2_p1_s2");
                let div_s3 = document.getElementById("div_row2_p1_s3");
                let div_s4 = document.getElementById("div_row2_p1_s4");
                
                let sele_s1 = document.getElementById("subitm_chk1");
                let sele_s2 = document.getElementById("subitm_chk2");
                let sele_s3 = document.getElementById("subitm_chk3");
                let sele_s4 = document.getElementById("subitm_chk4");
                let s_itm;
                s_itm = document.getElementById("s_flex_i1");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.flex = "auto";
                    if (sele_s2.checked)
                    div_s2.style.flex = "auto";
                    if (sele_s3.checked)
                    div_s3.style.flex = "auto";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.flex = "auto";
                };
                s_itm = document.getElementById("s_flex_i2");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.flex = "initial";
                    if (sele_s2.checked)
                    div_s2.style.flex = "initial";
                    if (sele_s3.checked)
                    div_s3.style.flex = "initial";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.flex = "initial";
                };
                s_itm = document.getElementById("s_flex_i3");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.flex = "none";
                    if (sele_s2.checked)
                    div_s2.style.flex = "none";
                    if (sele_s3.checked)
                    div_s3.style.flex = "none";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.flex = "none";
                };
                s_itm = document.getElementById("s_flex_i4");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.flex = "inherit";
                    if (sele_s2.checked)
                    div_s2.style.flex = "inherit";
                    if (sele_s3.checked)
                    div_s3.style.flex = "inherit";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.flex = "inherit";
                };
                s_itm = document.getElementById("s_flex_i5");
                if (s_itm.checked){
                    debugger
                   let s_itm_1 = document.getElementById("s_flex_i51"); 
                   let s_itm_2 = document.getElementById("s_flex_i52"); 
                   let s_itm_3 = document.getElementById("s_flex_i53"); 
                   let str_comb = s_itm_1.value+" "+s_itm_2.value+" "+s_itm_3.value;
                    if (sele_s1.checked)
                    div_s1.style.flex = str_comb;
                    if (sele_s2.checked)
                    div_s2.style.flex = str_comb;
                    if (sele_s3.checked)
                    div_s3.style.flex = str_comb;
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.flex = str_comb;
                };
            }
            
            function s_margin_change(){
                let div_s1 = document.getElementById("div_row2_p1_s1");
                let div_s2 = document.getElementById("div_row2_p1_s2");
                let div_s3 = document.getElementById("div_row2_p1_s3");
                let div_s4 = document.getElementById("div_row2_p1_s4");
                
                let sele_s1 = document.getElementById("subitm_chk1");
                let sele_s2 = document.getElementById("subitm_chk2");
                let sele_s3 = document.getElementById("subitm_chk3");
                let sele_s4 = document.getElementById("subitm_chk4");
                let s_itm;
                s_itm = document.getElementById("s_margin_i1");
                if (s_itm.checked){
                    if (sele_s1.checked)
                    div_s1.style.margin = "auto";
                    if (sele_s2.checked)
                    div_s2.style.margin = "auto";
                    if (sele_s3.checked)
                    div_s3.style.margin = "auto";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.margin = "auto";
                };
                
                s_itm = document.getElementById("s_margin_i2");
                if (s_itm.checked){
                    debugger
                    if (sele_s1.checked)
                    div_s1.style.margin = "0";
                    if (sele_s2.checked)
                    div_s2.style.margin = "0";
                    if (sele_s3.checked)
                    div_s3.style.margin = "0";
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.margin = "0";
                };
                
                s_itm = document.getElementById("s_margin_i3");
                if (s_itm.checked){
                    debugger
                   let s_itm_1 = document.getElementById("s_margin_i31"); 
                   let s_itm_2 = document.getElementById("s_margin_i32"); 
                   let s_itm_3 = document.getElementById("s_margin_i33"); 
                   let s_itm_4 = document.getElementById("s_margin_i34"); 
                   let str_comb = s_itm_1.value+" "+s_itm_2.value+" "+s_itm_3.value+" "+s_itm_4.value;
                    if (sele_s1.checked)
                    div_s1.style.margin = str_comb;
                    if (sele_s2.checked)
                    div_s2.style.margin = str_comb;
                    if (sele_s3.checked)
                    div_s3.style.margin = str_comb;
                    if (div_s4 && sele_s4.checked)
                    div_s4.style.margin = str_comb;
                };
            }
            
        </script>
    </head>
    
	<body>
    2.1.5-div的flex模型动态演示<br>
    <h3>flex模型动态演示</h3>
        <div id="div_row1" class="div_row1">
					父元素CSS3属性控制<br>
			 <div id="div_row1_p1" class="div_row1_p1">
				 <div id="div_row1_p1_s1" class="div_row1_p1_itm div_row1_p1_i1" >
                     方向(flex-direction):<br> <!-- label的for属性未被规定，那么 label 会关联其内容(标签夹住的内容),点击label触发radio的选择。 -->
                      <label class="flex-direction-label"> <input id="p_dir_i1" name="flex-direction" type="radio" onchange="p_dir_change()" checked="true"/> row </label>
                      <label class="flex-direction-label"> <input id="p_dir_i2" name="flex-direction" type="radio" onchange="p_dir_change()"/> row-reverse </label>
                      <label class="flex-direction-label"> <input id="p_dir_i3" name="flex-direction" type="radio" onchange="p_dir_change()"/> column </label>
                      <label class="flex-direction-label"> <input id="p_dir_i4" name="flex-direction" type="radio" onchange="p_dir_change()"/> column-reverse </label>
				 </div>
				 <div id="div_row1_p1_s2" class="div_row1_p1_itm div_row1_p1_i2" >
                     内容对齐（justify-content）:<br>
                      <label class="justify-content-label"> <input id="p_justify_i1" name="justify-content" type="radio" onchange="p_justify_change()"/> flex-start </label>
                      <label class="justify-content-label"> <input id="p_justify_i2" name="justify-content" type="radio" onchange="p_justify_change()"/> flex-end </label>
                      <label class="justify-content-label"> <input id="p_justify_i3" name="justify-content" type="radio" onchange="p_justify_change()" checked="true"/> center </label>
                      <label class="justify-content-label"> <input id="p_justify_i4" name="justify-content" type="radio" onchange="p_justify_change()"/> space-between </label>
                      <label class="justify-content-label"> <input id="p_justify_i5" name="justify-content" type="radio" onchange="p_justify_change()"/> space-around </label>
				 </div>
				 <div id="div_row1_p1_s3" class="div_row1_p1_itm div_row1_p1_i3" >
                     侧轴(纵轴)对齐（align-items）:<br>
                      <label class="align-items-label"> <input id="p_align_items_i1" name="align-items" type="radio" onchange="p_align_items_change()"/> flex-start </label>
                      <label class="align-items-label"> <input id="p_align_items_i2" name="align-items" type="radio" onchange="p_align_items_change()"/> flex-end </label>
                      <label class="align-items-label"> <input id="p_align_items_i3" name="align-items" type="radio" onchange="p_align_items_change()"/> center </label>
                      <label class="align-items-label"> <input id="p_align_items_i4" name="align-items" type="radio" onchange="p_align_items_change()"/> baseline </label>
                      <label class="align-items-label"> <input id="p_align_items_i5" name="align-items" type="radio" onchange="p_align_items_change()"/> stretch </label>
                      <label class="align-items-label"> <input id="p_align_items_i6" name="align-items" type="radio" onchange="p_align_items_change()" checked="true"/> normal </label>
				 </div>
				 <div id="div_row1_p1_s4" class="div_row1_p1_itm div_row1_p1_i4" >
                     元素换行方式（flex-wrap）:<br>
                      <label class="flex-wrap-label"> <input id="p_flex_wrap_i1" name="flex-wrap" type="radio" onchange="p_wrap_change()"/> nowrap </label>
                      <label class="flex-wrap-label"> <input id="p_flex_wrap_i2" name="flex-wrap" type="radio" onchange="p_wrap_change()"/> wrap </label>
                      <label class="flex-wrap-label"> <input id="p_flex_wrap_i3" name="flex-wrap" type="radio" onchange="p_wrap_change()"/> wrap-reverse </label>
                      <label class="flex-wrap-label"> <input id="p_flex_wrap_i4" name="flex-wrap" type="radio" onchange="p_wrap_change()" checked="true"/> initial </label>
                      <label class="flex-wrap-label"> <input id="p_flex_wrap_i5" name="flex-wrap" type="radio" onchange="p_wrap_change()"/> inherit </label>
				 </div>
				 <div id="div_row1_p1_s5" class="div_row1_p1_itm div_row1_p1_i5" >
                     (flex-wrap起效时)修改各行的对齐方式 （align-content）:<br>
                      <label class="align-content-label"> <input id="p_align_content_i1" name="align-content" type="radio" onchange="p_align_content_change()"/> flex-start </label>
                      <label class="align-content-label"> <input id="p_align_content_i2" name="align-content" type="radio" onchange="p_align_content_change()"/> flex-end </label>
                      <label class="align-content-label"> <input id="p_align_content_i3" name="align-content" type="radio" onchange="p_align_content_change()"/> center </label>
                      <label class="align-content-label"> <input id="p_align_content_i4" name="align-content" type="radio" onchange="p_align_content_change()"/> space-between </label>
                      <label class="align-content-label"> <input id="p_align_content_i5" name="align-content" type="radio" onchange="p_align_content_change()"/> space-around </label>
                      <label class="align-content-label"> <input id="p_align_content_i6" name="align-content" type="radio" onchange="p_align_content_change()"/> stretch </label>
                      <label class="align-content-label"> <input id="p_align_content_i7" name="align-content" type="radio" onchange="p_align_content_change()" checked="true"/> normal </label>
				 </div>
                 
                 
			 </div>
        </div>
        <br>
        <div id="div_row2" class="div_row2">
            <div>
                <span class="paritm_beg-label">蓝色框为父DIV，绿色框为子DIV:</span>
                <label class="paritm_chk-label"><input id="paritm_chk1" name="paritm" type="radio" checked="true" onchange="sele_itm_change()"/> 显示3个</label>
                <label class="paritm_chk-label"><input id="paritm_chk2" name="paritm" type="radio" onchange="sele_itm_change()"/> 显示5个</label>
			</div>
            <div id="div_row2_p1" class="div_row2_p1">
				<div id="div_row2_p1_s1" class="div_row2_p1_itm text_left" >
                     子div一(内文置左)
				</div>
				<div id="div_row2_p1_s2" class="div_row2_p1_itm text_center" style="height:25%;width:22%;">
                     子div二(内文置中)
				</div>
				<div id="div_row2_p1_s3" class="div_row2_p1_itm text_right" >
                     子div三(内文置右)
				</div>
				<div id="div_row2_p1_s4" class="div_row2_p1_itmx paritm_add_off" >
                     子div四(加项)
				</div>
				<div id="div_row2_p1_s5" class="div_row2_p1_itmx paritm_add_off" >
                     子div五(加项)
				</div>
                 
			</div>
             
			<div id="div_row2_p2" class="div_row2_p2">
                <span onclick="show_par_properties()" class="div_row2_p2_tit btn_round" > 父DIV的flex相关属性值:(点击显示) </span>
				<div id="div_row2_p2_s2" class="div_row2_p2_s2 text_overflow_auto" >
				</div>
                 
			</div>
             
        </div>
        <br>
        <div id="div_row3" class="div_row3">
			<div title="order 属性没有在界面进行设值演示,有需要试的可直接在本文件的样式中试改">
                <span class="subitm_beg-label">子元素CSS3属性控制，选择子元素：</span>
                <label class="subitm_chk-label"><input id="subitm_chk1" name="subitm" type="checkbox"/> Item 1</label>
                <label class="subitm_chk-label"><input id="subitm_chk2" name="subitm" type="checkbox" checked="true" /> Item 2</label>
                <label class="subitm_chk-label"><input id="subitm_chk3" name="subitm" type="checkbox"/> Item 3</label>
                <label class="subitm_chk-label"><input id="subitm_chk4" name="subitm" type="checkbox"/> Item 4</label>
            </div>		
			 <div id="div_row3_p1" class="div_row3_p1">
				 <div id="div_row3_p1_s1" class="div_row3_p1_itm div_row3_p1_i1" >
                     自身在侧轴(纵轴)的对齐(align-self):<br> <!-- label的for属性未被规定，那么 label 会关联其内容(标签夹住的内容),点击label触发radio的选择。 -->
                      <label class="align-self-label"> <input id="s_align_self_i1" name="align-self" type="radio" onchange="s_align_self_change()" checked/> auto </label>
                      <label class="align-self-label"> <input id="s_align_self_i2" name="align-self" type="radio" onchange="s_align_self_change()"/> flex-start </label>
                      <label class="align-self-label"> <input id="s_align_self_i3" name="align-self" type="radio" onchange="s_align_self_change()"/> flex-end </label>
                      <label class="align-self-label"> <input id="s_align_self_i4" name="align-self" type="radio" onchange="s_align_self_change()"/> center </label>
                      <label class="align-self-label"> <input id="s_align_self_i5" name="align-self" type="radio" onchange="s_align_self_change()"/> baseline </label>
                      <label class="align-self-label"> <input id="s_align_self_i6" name="align-self" type="radio" onchange="s_align_self_change()"/> stretch </label>
				 </div>
				 <div id="div_row3_p1_s2" class="div_row3_p1_itm div_row3_p1_i2" >
                     元素分配空间方式(flex):<br> <!-- label的for属性未被规定，那么 label 会关联其内容(标签夹住的内容),点击label触发radio的选择。 -->
                      <label class="flex-label"> <input id="s_flex_i1" name="flex" type="radio" onchange="s_flex_change()"/> auto </label>
                      <label class="flex-label"> <input id="s_flex_i2" name="flex" type="radio" onchange="s_flex_change()" checked/> initial </label>
                      <label class="flex-label"> <input id="s_flex_i3" name="flex" type="radio" onchange="s_flex_change()"/> none </label>
                      <label class="flex-label"> <input id="s_flex_i4" name="flex" type="radio" onchange="s_flex_change()"/> inherit </label>
                      <label class="flex-label2"> <input id="s_flex_i5" name="flex" type="radio" onchange="s_flex_change()"/> [grow shrink basis] </label>
                      <div class="flex-div2"> <div class="flex-divl1">flex-grow:   </div> <input class="flex-inp1" id="s_flex_i51" type="text" onchange="s_flex_change()" value="0" title="可以填:0,1,5,50之类"/> </div>
                      <div class="flex-div2"> <div class="flex-divl1">flex-shrink: </div> <input class="flex-inp1" id="s_flex_i52" type="text" onchange="s_flex_change()" value="1" title="可以填:0,1,5,50之类"/> </div>
                      <div class="flex-div2"> <div class="flex-divl1">flex-basis:  </div> <input class="flex-inp1" id="s_flex_i53" type="text" onchange="s_flex_change()" value="auto" title="可以填:auto,0,1px,50px之类"/> </div>
				 </div>
				 <div id="div_row3_p1_s3" class="div_row3_p1_itm div_row3_p1_i2" >
                     (对齐)留空参数（margin）:<br>
                      <label class="flex-label"> <input id="s_margin_i1" name="margin" type="radio" onchange="s_margin_change()"/> auto </label>
                      <label class="flex-label"> <input id="s_margin_i2" name="margin" type="radio" onchange="s_margin_change()" checked /> 0px </label> 
                      <label class="flex-label2"> <input id="s_margin_i3" name="margin" type="radio" onchange="s_margin_change()"/> [Top Right Bottom Left] </label>
                      <div class="flex-div2"> <div class="margin-divl1">margin-top:   </div> <input class="margin-inp1" id="s_margin_i31" type="text" onchange="s_margin_change()" value="0px" title="可以填:auto,0,1px,50px之类"/> </div>
                      <div class="flex-div2"> <div class="margin-divl1">margin-right: </div> <input class="margin-inp1" id="s_margin_i32" type="text" onchange="s_margin_change()" value="0px" title="可以填:auto,0,1px,50px之类"/> </div>
                      <div class="flex-div2"> <div class="margin-divl1">margin-bottom:  </div> <input class="margin-inp1" id="s_margin_i33" type="text" onchange="s_margin_change()" value="0px" title="可以填:auto,0,1px,50px之类"/> </div>
                      <div class="flex-div2"> <div class="margin-divl1">margin-left:  </div> <input class="margin-inp1" id="s_margin_i34" type="text" onchange="s_margin_change()" value="0px" title="可以填:auto,0,1px,50px之类"/> </div>
				 </div>
                 
				 <div id="div_row3_p1_s4" class="div_row3_p1_itm div_row3_p1_i4" >
                     <span onclick="show_son_properties()" class="div_row2_p2_tit btn_round" > 子元素本身flex相关属性:(点击显示)</span>
                     <div id="div_row3_p1_s4s" class="div_row3_p1_s4s text_overflow_auto" >
                     </div>
				 </div>
			 </div>
        </div>

    </body>

</html>

